import React, { Component } from 'react';
import '../../../styles/index/Home/Cate.scss'

class Cate extends Component {
    state = {
        list: [
            {
                pic: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png',
                name: '嗨购超市'
            },
            {
                pic: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png',
                name: '数码电器'
            },
            {
                pic: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png',
                name: '嗨购服饰'
            },
            {
                pic: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png',
                name: '嗨购生鲜'
            },
            {
                pic: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png',
                name: '嗨购到家'
            },
            {
                pic: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png',
                name: '充值缴费'
            },
            {
                pic: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png',
                name: '9.9元拼'
            },
            {
                pic: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png',
                name: '领劵'
            },
            {
                pic: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png',
                name: '零津贴'
            },
            {
                pic: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png',
                name: 'plus会员'
            }
        ]
    }
    render() {
        return (
            <div className='home_cate'>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <figure key={index}>
                                <figcaption><img src={item.pic} alt="" /></figcaption>
                                {item.name}
                            </figure>
                        )
                    })
                }
            </div>
        );
    }
}

export default Cate;